import React, { Component } from "react";
import { Form, Input, Button } from "antd";
import { connect } from 'react-redux'
import { loginAysnc } from 'store/user/actionCreators'
const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
};

class Login extends Component {
  render() {
    return (
      <div>
        <Form
          {...layout}
          name="basic"
         
          onFinish={this.onFinish}
          
        >
          <Form.Item
            label="用户名"
            name="username"
            rules={[{ required: true, message: "Please input your username!" }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="密码"
            name="password"
            rules={[{ required: true, message: "Please input your password!" }]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item {...tailLayout}>
            <Button type="primary" htmlType="submit">
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    );
  }
  onFinish = (value)=>{
    // 登录
    this.props.login(value)
  }
}
// 将store state 与props连接
const mapStateToProps=(state)=>{
  return {

  }
}
// 将actionCreators与props连接
const mapDispatchToProps = (dispatch)=>{
  return {
    login: (params)=>{
      dispatch(loginAysnc(params))
    }
  }
}

export default connect(mapStateToProps,mapDispatchToProps)(Login)